<template>
	<view class="base-button" :class="[`base-button--${type}`, {'base-button--disabled': disabled}]" @click="handleClick">
		<slot>{{text}}</slot>
	</view>
</template>

<script>
/**
 * @description 基础按钮组件
 * @author TickTock团队
 * @date 2023-06-06
 */
export default {
	name: 'BaseButton',
	props: {
		/**
		 * 按钮类型
		 */
		type: {
			type: String,
			default: 'default',
			validator: value => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
		},
		/**
		 * 按钮文本
		 */
		text: {
			type: String,
			default: ''
		},
		/**
		 * 是否禁用
		 */
		disabled: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleClick(e) {
			if (!this.disabled) {
				this.$emit('click', e);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.base-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	padding: 0 30rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	transition: all 0.2s;
	
	&--default {
		background-color: #f5f5f5;
		color: #333;
	}
	
	&--primary {
		background-color: #3cc51f;
		color: #fff;
	}
	
	&--success {
		background-color: #4cd964;
		color: #fff;
	}
	
	&--warning {
		background-color: #f0ad4e;
		color: #fff;
	}
	
	&--danger {
		background-color: #dd524d;
		color: #fff;
	}
	
	&--disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}
</style> 